<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button @click="handleExport"> 导出</a-button>
      <a-button type="primary" @click="handleShowItem"> 新增</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction :actions="[
          // {
          //   tooltip: '修改',
          //   icon: 'clarity:note-edit-line',
          //   onClick: handleEdit.bind(null, record),
          // },
          {
            tooltip: '删除',
            icon: 'ant-design:delete-outlined',
            color: 'error',
            onClick: (e) => { e.stopPropagation(); },
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
              placement: 'left'
            },
          },
        ]" />
      </template>
    </template>
  </BasicTable>

  <DetailModal @register="registerModal" @success="handleSuccess" />
  <DetailTableModal @register="registerModal2" @success="handleSuccess" />
</template>

<script lang="ts">
import { defineComponent, ref, } from 'vue';
import { BasicModal, } from '/@/components/Modal';
import { propTypes } from '/@/utils/propTypes';

import { useMessage } from '/@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction, } from '/@/components/Table';
import { useModal } from '/@/components/Modal';

import DetailTableModal from './DetailTableModal.vue';
import DetailModal from './DetailModal.vue';

import { del, getDetailList, exportData, exportExcel, } from '/@/api/project/reasonDetail';
import { env } from 'process';

export default defineComponent({
  components: { BasicModal, BasicTable, TableAction, DetailTableModal, DetailModal },
  emits: ['success', 'register'],
  props: {
    reasonId: propTypes.number,//委托依据id
  },
  setup(props, { emit }) {
    const reasonId = ref(props.reasonId);

    //采样信息列表
    const [registerTable, { reload }] = useTable({
      api: () => getDetailList({
        reasonId: reasonId.value,
      }),
      columns: [{
        title: '检测类别',
        dataIndex: 'checkType',
      }, {
        title: '项目',
        dataIndex: 'checkItem',
      }, {
        title: '类别',
        dataIndex: 'checkSubtype',
      }, {
        title: '检测方法',
        dataIndex: 'checkStandard',
      }, {
        title: '采集或保存方法',
        dataIndex: 'collectWay',
      }, {
        title: '操作',
        dataIndex: 'action',
      },],
      formConfig: {
        labelWidth: 120,
        showAdvancedButton: false,
        showResetButton: false,
        autoSubmitOnEnter: true,
      },
      canColDrag: true,
      useSearchForm: false,
      bordered: true,
      showIndexColumn: true,
    });



    const { createMessage } = useMessage();
    //新增：表格弹框
    const [registerModal2, { openModal: openModal2 }] = useModal();
    function handleShowItem() {
      if (props.reasonId > 0) {
        openModal2(true, {
          reasonId: props.reasonId,
        });
      } else {
        createMessage.error('请先点击下方"存草稿"按钮，保存委托依据，然后添加表单信息');
      }
    }
    //导出
    function handleExport() {
      if (process.env.NODE_ENV === 'production') {
        location.href = '/CheckReasonDetail/export/' + props.reasonId;
      } else {
        location.href = '/check-api/CheckReasonDetail/export/' + props.reasonId;
      }
    }

    //编辑：弹框
    const [registerModal, { openModal }] = useModal();
    function handleCreate() {
      openModal(true, {
        reasonId: props.reasonId,
        isUpdate: false,
      });
    }
    function handleEdit(record: Recordable) {
      openModal(true, {
        record,
        isUpdate: true,
      });
    }

    function handleDelete(record: Recordable) {
      del(record.id).then(() => {
        reload();
        createMessage.success('删除成功');
      });
    }
    function handleSuccess() {
      setTimeout(() => {
        reload();
        emit('success');
        createMessage.success('操作成功');
      }, 200);
    }
    return {
      registerModal, registerTable, handleCreate, handleEdit, handleDelete, handleSuccess,
      registerModal2, handleShowItem, handleExport,
    };
  },
});
</script>
